<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js">
    </script>
</head>
<body>

<div id="app" >
    {{title}},{{sex}},{{age}},{{flag}},{{rich}},{{myHello()}}

    <p v-if="flag">
        这个p标签经过判断值为true
    </p>

    <p v-else-if="rich">
        这个p标签经过判断rich属性的值为false
    </p>

<!--    判断并显示语法-->
<p v-show="rich">
    使用show判断显示语法，rich的值为false
</p>

<!--    遍历数组第一种语法-->
    <ul>
<!-- 遍历属性名为args的集合。每遍历一次拿出一个元素，放入a变量中-->
        <li v-for="a in args">{{a}}</li>
    </ul>

<!--    变量数组第二种语法-->
    <ul>
<!--        变量属性名为args的集合，每遍历一次拿出一个元素，放入a变量中
            i就是数组的素引号，：key就是取素引号，赋值给i这个变量
-->
        <li v-for="(a,i) in args" :key="i">{{i}}======={{a}}</li>
    </ul>

<!--    遍历对象第三种语法-->
<!--
        遍历stu对象。每次获取一个属性
        属性值赋值给v
        属性名赋值给k
        素引号赋值给i
-->
    <ul>
        <li v-for="(v,k,i) in stu">{{v}}======{{k}}==={{i}}</li>
    </ul>

<!--    演示v-model双向绑定-->
    <input type="text" v-model="title"/>
    显示绑定的数据：{{title}}

<!--    绑定html标签的原有属性-->
    <a :href="jd">调转到京东</a>


<br/>
<!--    事件绑定-->
    <button type="button" v-on:click="myAdd(1)">累加</button>
    显示累加数据：{{sum}}

<!--    事件绑定，获取x轴和y轴的鼠标当前位置的坐标-->
    <p @mousemove="xy">
        x轴:{{x}}
        y轴:{{y}}
    </p>
</div>

<script type="text/javascript">
    //创建一个vue对象
    new Vue({
        el:"#app",
        //定义数据
        data:{
            sum:0,
            title:"张三",
            sex:"男",
            age:18,
            flag:true,
            rich:false,
            args:[1,2,3,4,5,6,7,8,9],
            stu:{
                username:"饕鬄",
                sex:"男",
                age:200
            },
            jd:"http://www.jd.com",
            x:0,
            y:0,
        },
        //定义方法
        methods:{
            myHello:function () {
                return "hello word";
            },
            myAdd:function (s) {
                this.sum=this.sum+s
            },
            xy:function (event) {
                //获取x轴坐标
                this.x=event.clientX;
                //获取y轴坐标
                this.y=event.clientY;
            }
        }
    });
</script>
</body>
</html>